import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementUI from 'element-ui'; //核心js
import 'element-ui/lib/theme-chalk/index.css';//element-ui css文件
import "./assets/styles/common.css";
import qfSubMenu from "qf-sub-menu";
Vue.use(ElementUI);
Vue.use(qfSubMenu)
// Vue.config.productionTip = false;

// 路由守卫 不让未登录的状态跳转
// 核心：路由全局前置钩子函数beforEach
// next 释放控制权的函数
router.beforeEach(function (to, from, next) {
  // 判断本地存储中是否有token，如果有就next()开门，如果没有就跳转到登录页面
  let token = localStorage.getItem("yf-token");
  // 如果用户访问的是login页面，直接开门，
  // 如果访问其他页面的，那么需要验证是否有token,如果没有跳转到login,如果有直接开门
  if (to.path === "/login") {
    next()
  } else {
    if (token) {
      /* 
       判断vuex中，store里面的sideMenu数组长度是否为0，
       如果是那么久重新调用action找那个获取
       用户菜单的方法，计算用户菜单，并且渲染
      */
      let { sideMenu } = store.state
      if (sideMenu && sideMenu.length === 0) {
        // 防止空指针
        // 调用action中获取用户菜单的方法
        store.dispatch("FETCH_MENULIST")
          .then(() => {
            // console.log("放行");
            next({ path: to.path })
            /*
        这里要注意，next里面要传参数即要进入的页面的路由信息，
        因为next传参数后，当前要的路由会被废止，转而进入
        参数对应的路由，虽然是同一个路由，这么做主要是为确保addRoutes生效
        */
          })
      } else {
        next()

      }
    } else {
      next({ path: "/login" })
    }
  }
})
// 全局的后置钩子
router.afterEach((to, from) => {
  // console.log(to);
  // 干掉第0项
  let breadCrum = [...to.matched]
  breadCrum.splice(0, 1)
  store.commit("SET_BREADCRUM", breadCrum)
})
new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");
